﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		
		<link href="App_StyleSheets/jquery-ui-1.10.3.css" rel="stylesheet" />
		<link href="App_StyleSheets/Default.css" rel="stylesheet" />

		<script src="App_ClientScripts/jquery-2.0.2.min.js" type="text/javascript"></script>
		<script src="App_ClientScripts/jquery-ui-1.10.3.js" type="text/javascript"></script>
		<script src="App_ClientScripts/knockout-3.0.0.js" type="text/javascript"></script>

		<script src="Default.html.js" type="text/javascript" ></script>

		
		<script id="TabPage-Template" type="text/html">
			<div class="TabPage" data-bind="event: { mousedown: OnSelect }, title: $index, attr: { 'class': (IsSelected()) ? 'TabPage TabPage-Selected' : 'TabPage' }">
				<span data-bind="text: Title" ></span>
			</div>
		</script>

		<script id="Body-Template" type="text/html">
			<div data-bind="with: Model">
				<span data-bind="text: Title" style="font-size:40px;"></span>
				<div style="position:absolute; left:0; bottom:0; width:100%" class="TabControl">
					<div class="TabControl-Header">
						<div data-bind="template: { name: 'TabPage-Template', foreach: Items }"></div>
						<a class="AddNewButton" href="#" data-bind="event: { mousedown: Add }" >New Item</a>
					</div>
					<div data-bind="with: SelectedItem" class="TabControl-Body">
						<div data-bind="template: { name: 'TabPage-Template', foreach: Items}" class="TabPage-SubItem-PlaceHolder"></div>
						<a class="AddNewButton" href="#" data-bind="event: { mousedown: Add }" >New Item</a>
						<div data-bind="with: SelectedItem" style="height:250px" >
							<table style="width:100%; height:100%;">
								<tr>
									<td style="width:80px;">
										<div class="Folder">
											<div class="Icon"></div>
											<div data-bind="text:Title" ></div>
										</div>
									</td>
									<td>
										<div class="SplitterPanel" data-bind="Splitter: $root.Settings.ContentViewWidth">
											<div class="Panel_1">
												<div data-bind="foreach: Items">
													<div class="Folder-32x32" data-bind="event: { mousedown: $root.OnSelect }">
														<div class="Icon"></div>
														<div data-bind="text:Title" ></div>
													</div>
												</div>
											</div>
											<div class="Panel_2"></div>
										</div>
									</td>
								</tr>
							</table>
						</div>
						<div data-bind="with: $root.SelectedItem" class="SelectedPath">
							<div data-bind="foreach: Ancestors">
								<span data-bind="text: Title"></span>&nbsp;\
							</div>
						</div>
					</div>
				</div>
			</div>
		</script>

	</head>
	<body data-bind="template: { name: 'Body-Template' }"></body>
</html>